<template>
  <div class="questionsContainer">
    <el-card>
      <el-row style="margin-bottom: 15px" type="flex" justify="space-between">
        <span style="font-size: 12px; color: pink"
          >说明：目前支持学科和关键字条件筛选</span
        >
        <el-button
          @click="$router.push(`/questions/new`)"
          type="success"
          size="small"
          icon="el-icon-edit"
          >新增试题</el-button
        >
      </el-row>
      <!-- 搜索区域 -->
      <el-row>
        <el-form
          ref="searchForm"
          :inline="true"
          label-width="80px"
          class="searchForm"
          size="small"
        >
          <el-form-item label="学科">
            <el-select
              v-model="searchForm.subjectID"
              style="width: 239px; height: 32px"
              placeholder="请选择"
              @focus="onSubjectSelect"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select
              v-model="searchForm.catalogID"
              style="width: 239px; height: 32px"
              placeholder="请选择"
              @focus="onTwoSubjectSelect"
            >
              <el-option
                v-for="item in towSubjectList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select
              v-model="searchForm.tags"
              style="width: 239px; height: 32px"
              placeholder="请选择"
              @focus="ontagsSelect"
            >
              <el-option
                v-for="item in tagsList"
                :key="item.id"
                :label="item.tagName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input
              v-model="searchForm.keyword"
              style="width: 239px; height: 32px"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
          <el-form-item label="试题类型">
            <el-select
              v-model="searchForm.questionType"
              style="width: 239px; height: 32px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select
              v-model="searchForm.difficulty"
              style="width: 239px; height: 32px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select
              v-model="searchForm.direction"
              style="width: 239px; height: 32px"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select
              v-model="searchForm.creatorID"
              style="width: 239px; height: 32px"
              placeholder="请选择"
              @focus="onCreatorSelect"
            >
              <el-option
                v-for="item in creatorList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input
              v-model="searchForm.remarks"
              style="width: 239px; height: 32px"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input
              v-model="searchForm.shortName"
              style="width: 239px; height: 32px"
            ></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select
              v-model="searchForm.province"
              style="width: 115px; height: 32px; margin-right: 5px"
              placeholder="请选择"
              @focus="onProvince"
            >
              <el-option
                v-for="(item, index) in provinces"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              v-model="searchForm.city"
              style="width: 119px; height: 32px"
              placeholder="请选择"
              @focus="onCity"
            >
              <el-option
                v-for="(item, index) in citys"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button style="margin-left: 197px" size="small" @click="onClear"
              >清除</el-button
            >
            <el-button type="primary" size="small" @click="onSearch"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>

      <!-- 总数区域 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 15px"
      >
      </el-alert>

      <!-- table表格区域 -->
      <el-table
        :header-cell-style="{
          background: '#fafafa',
          borderBottom: '2px solid #e8e8e8'
        }"
        class="questionsTable"
        :data="list"
        style="width: 100%"
      >
        <el-table-column width="120" prop="number" label="试题编号">
        </el-table-column>
        <el-table-column width="105" prop="subject" label="学科">
        </el-table-column>
        <el-table-column width="103" prop="catalog" label="目录">
        </el-table-column>
        <el-table-column width="103" prop="questionType" label="题型">
          <template slot-scope="{ row }">
            <span>{{ +row.questionType | questionType }}</span>
          </template>
        </el-table-column>
        <el-table-column width="280" label="题干">
          <template slot-scope="{ row }">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column width="180" prop="addDate" label="录入时间">
          <template slot-scope="{ row }">
            <span>{{ row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column width="103" prop="difficulty" label="难度">
          <template slot-scope="{ row }">
            <span>{{ +row.difficulty | difficulty }}</span>
          </template>
        </el-table-column>
        <el-table-column width="103" prop="creator" label="录入人">
        </el-table-column>
        <el-table-column width="180" label="操作">
          <template slot-scope="scope">
            <el-button
              v-title="'预览'"
              @click="perviewQuestion(scope.row.id)"
              size="small"
              plain
              type="primary"
              icon="el-icon-view"
              circle
            ></el-button>
            <!-- <el-button @click="$router.push(`/questions/new?id=${scope.row.id}`)" size="small" plain type="success" icon="el-icon-edit" circle></el-button> -->
            <el-button
              v-title="'修改'"
              @click="
                $router.push({
                  path: '/questions/new',
                  query: { id: scope.row.id }
                })
              "
              size="small"
              plain
              type="success"
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              v-title="'删除'"
              @click="onDelQuestion(scope.row.id)"
              size="small"
              plain
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
            <el-button
              v-title="'加入精选'"
              @click="onAddRandoms(scope.row.id)"
              size="small"
              plain
              type="warning"
              icon="el-icon-check"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部分页 -->
      <el-row type="flex" justify="end" style="margin: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pages.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>

      <!-- 题目预览弹层 -->
      <PreviewQuestions
        ref="questionDialog"
        :show-dialog.sync="showDialog"
      ></PreviewQuestions>
    </el-card>
  </div>
</template>

<script>
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
// 枚举列表
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
// 城市和地区
import { provinces, citys } from '@/api/hmmm/citys'
// 学科列表
import { simple as subjectList } from '@/api/hmmm/subjects'
// 二级目录列表
import { list as twoSubjectList } from '@/api/hmmm/directorys'
// 标签列表
import { list as tagsList } from '@/api/hmmm/tags'
// 录入人列表
import { simple } from '@/api/base/users'
// 题目预览的组件
import PreviewQuestions from '@/module-hmmm/components/preview-questions'

export default {
  name: 'QuestionIndex',
  components: { PreviewQuestions },
  filters: {
    questionType(value) {
      const obj = questionType.find((item) => item.value === value)
      return obj ? obj.label : '未知'
    },
    difficulty(value) {
      const obj = difficulty.find((item) => item.value === value)
      return obj ? obj.label : '未知'
    }
  },
  directives: {
    // 自定义指令实现 表格按钮悬停提示文本
    title: {
      inserted(dom, option) {
        dom.title = option.value
      }
    }
  },
  data() {
    return {
      // 题目预览弹层
      showDialog: false,
      // 搜索表单
      searchForm: {
        subjectID: null, // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: null, // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业所在省份
        city: '' // 企业所在城市
      },
      // 学科列表
      subjectList: [],
      // 二级学科列表
      towSubjectList: [],
      // 标签列表
      tagsList: [],
      questionType,
      difficulty,
      direction,
      // 录入人列表
      creatorList: [],
      provinces: [], // 城市
      citys: [], // 地区
      // 试题的列表
      list: [],
      // 总条数
      total: null,
      // 分页数据
      pages: {
        page: 1, // 当前页数
        pagesize: 5 // 每页有多少条数据
      }
    }
  },
  created() {
    // 重置表单
    this.$nextTick(() => {
      this.onClear()
    })
  },
  methods: {
    // 点击学科 获取学科列表
    async onSubjectSelect() {
      const { data } = await subjectList()
      this.subjectList = data
    },
    // 获取学科的二级目录
    async onTwoSubjectSelect() {
      if (this.searchForm.subjectID) {
        try {
          const {
            data: { items }
          } = await twoSubjectList({ subjectID: this.searchForm.subjectID })
          this.towSubjectList = items
        } catch (error) {
          console.log(error)
        }
      }
    },
    // 获取标签列表
    async ontagsSelect() {
      if (this.searchForm.subjectID) {
        try {
          const {
            data: { items }
          } = await tagsList({ subjectID: this.searchForm.subjectID })
          this.tagsList = items
        } catch (error) {
          console.log(error)
        }
      }
    },
    // 获取录入人列表
    async onCreatorSelect() {
      const { data } = await simple()
      // console.log(data)
      this.creatorList = data
    },
    // 点击城市
    onProvince() {
      this.provinces = provinces()
    },
    // 点击地区
    onCity() {
      if (this.searchForm.province) {
        this.citys = citys(this.searchForm.province)
      }
    },
    // 点击清除
    onClear() {
      // 重置表单
      this.searchForm = {
        subjectID: null, // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: null, // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业所在省份
        city: '' // 企业所在城市
      }
      this.pages = {
        page: 1, // 当前页数
        pagesize: 5 // 每页有多少条数据
      }
      this.$refs.searchForm.resetFields()
      this.getList()
    },
    // 点击搜索
    async onSearch() {
      this.getList()
    },
    // 获取基础题库列表
    async getList() {
      try {
        const { data } = await list({ ...this.searchForm, ...this.pages })
        this.list = data.items
        this.total = data.counts
      } catch (error) {
        console.log(error)
      }
    },
    // 每页数量发生变化时
    handleSizeChange(pagesize) {
      this.pages.pagesize = pagesize
      this.getList()
    },
    // 页码值发生变化时
    handleCurrentChange(page) {
      this.pages.page = page
      this.getList()
    },
    // 点击删除题目
    async onDelQuestion(id) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove({ id })
      this.$message.success('删除成功')
      this.getList()
    },
    // 点击加入精选
    async onAddRandoms(id) {
      await this.$confirm('此操作将该题目加入精选，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
      await choiceAdd({ id, choiceState: 1 })
      this.$message.success('加入精选题库成功')
      this.getList()
      this.$router.push('/questions/choice')
    },
    // 点击预览题目
    async perviewQuestion(id) {
      await this.$refs.questionDialog.getQuestionInfo(id)
      this.showDialog = true
    }
  }
}
</script>

<style scoped lang="scss">
.questionsContainer {
  padding: 10px;
  .searchForm {
    .el-form-item {
      margin: 0;
      width: 319px;
      height: 50px;
    }
  }
}
</style>
